<template>
  <view class="main" v-if="isCardShow &&!isLoading">
    <view class="card">
      <view class="main_pic_box">
        <image class="main_pic" :src="cardInfo.cardInfo.pic" mode="aspectFit"></image>
      </view>
      <view class="detail">
        <text style="font-size: 24rpx">{{ cardInfo.cardInfo.goodName }}</text>
        <text style="font-size: 22rpx">{{ cardInfo.cardInfo.detail }}</text>
      </view>
      <view class="price_area" @click.stop="toshoping">
        <text style="font-size: 24rpx; color: white">{{ cardInfo.cardInfo.detail1 }}</text>
        <text style="font-size: 35rpx; font-weight: 600; color: white">{{ cardInfo.cardInfo.detail2 }}</text>
      </view>
    </view>
    <view class="close" @click.stop="handleMaskShow">
      <uni-icons type="close" size="15" color="white"></uni-icons>
    </view>
    <view v-if="isMaskShow" class="mask">
      <view class="closebtn" @click.stop="closeonly">
        <text style="font-size: 24rpx; color: white">关闭</text>
      </view>
      <view class="closebtn" @click.stop="closeall">
        <text style="font-size: 24rpx; color: white" @click="closeall">全部关闭</text>
      </view>
    </view>
  </view>
</template>
<script>
const db = uniCloud.databaseForJQL();
export default {
  name: 'goodShowCard',
  data() {
    return {
      cards: [],
      cardInfo: {
        cardInfo: {}
      },
      indexNow: 0,
      intervalId: null,
      isCardShow: false,
      isMaskShow: false,
      isLoading: true,
      displayDuration: 5000, // 显示时长 5 秒
      intervalDuration: 5000 // 间隔时长 5 秒
    };
  },
  watch: {
    cards: {
      handler(newval) {
       
        if (newval.length > 0) {
          this.showcard();
        } else {
          if (this.intervalId) {
            clearInterval(this.intervalId);
          }
          this.isCardShow = false;
          this.isMaskShow = false;
        }
      }
    },
	isCardShow:{
		handler(newval){
			this.$emit('CardShow',newval)
		}
	}
  },
  mounted() {
    uni.$on("inGroup", (res) => {
      if (res) {
        this.initData(res.groupId);
      } else {
        this.cards = [];
      }
    });
  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  methods: {
    closeonly() {
      // 假设cardInfo有唯一标识id，根据id来过滤
      const cardId = this.cardInfo._id;
      this.cards = this.cards.filter((item) => item._id!== cardId);
      this.isCardShow = false;
      this.isMaskShow = false;
      console.log(this.cards.length);
    },
    closeall() {
      this.cards = [];
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.isCardShow = false;
      this.isMaskShow = false;
    },
    handleMaskShow() {
      console.log('切换遮罩层显示状态', this.isMaskShow);
      this.isMaskShow =!this.isMaskShow;
      // 可以在这里添加一些逻辑，比如当遮罩层显示时暂停定时器等
    },
    async initData(groupId) {
      try {
        const res = await db
         .collection('goodShowCard')
         .where({
            groupId: groupId
          })
         .get();

        this.cards = res.data;
        this.isLoading = false;
      } catch (e) {
        console.error(e);
        this.isLoading = false;
      }
    },
    toshoping() {
       uni.navigateTo({
        url: `/pages/goodBuy/goodBuy?id=${this.cardInfo.cardInfo.productId}`
      });
    },
showcard() {
    // 定义轮播间隔时间（毫秒）
    const intervalDuration = 5000;
    // 定义卡片显示时长（毫秒）
    let indexNow = 0;
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    // 设置定时器
   this.intervalId = setInterval(() => {
        // 获取当前卡片信息
        this.cardInfo = this.cards[indexNow];
        // 显示卡片
        this.isCardShow = true;
               indexNow++;
        if (indexNow >= this.cards.length) {
            indexNow = 0;
        }
    }, intervalDuration);

    // 可以在需要停止轮播的时候调用 clearInterval(intervalId) 来清除定时器
}
  }
};
</script>
<style lang="scss" scoped>
.main {
  position: fixed;
  top: 140rpx;
  left: 50rpx;
  z-index: 80;
  background-color: white;
  width: 240rpx;
  height: 320rpx;
  border-radius: 25rpx;
  align-items: center;
}

.card {
  display: flex;
  flex-direction: column;
  width: 220rpx;
  height: 300rpx;
  border-radius: 25rpx;
  margin: 5rpx;
  background: white;
  align-items: center;
  justify-content: center;
}

.main_pic_box {
  height: 190rpx;
  width: 220rpx;
  border-top-left-radius: 25rpx;
  border-top-right-radius: 25rpx;
}

.main_pic {
  height: 190rpx;
  width: 220rpx;
  border-top-left-radius: 25rpx;
  border-top-right-radius: 25rpx;
}

.detail {
  height: 60rpx;
  width: 220rpx;
  background-color: white;
  	/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
  text-overflow: ellipsis;
  height: 50rpx;
}

.price_area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-top: 10rpx;
  text-overflow: ellipsis;
  height: 50rpx;
  width: 220rpx;
  border-radius: 25rpx;
  background-color: red;
}

.close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 14rpx;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}

.mask {
  position: absolute;
  width: 220rpx;
  height: 300rpx;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  border-radius: 25rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 130;
}

.closebtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 80rpx;
  width: 160rpx;
  margin-bottom: 50rpx;
  height: 50rpx;
}
</style>